<template>
  <view class="wrap">
    <view class="logo">
      <image
        src="https://ya30images.hbwlife.com/wxmp/logo-yongan30.png"
        mode=""
      ></image>
    </view>
    <view class="btn-wrap">
      <button
        class="add-btn"
        open-type="getPhoneNumber"
        @getphonenumber="onGetPhoneNumber"
      >
        绑定手机号
      </button>
    </view>
    <view class="tips">
      <view class="tip-content">
        <view
          class="toggle-check"
          @click="handleToggle"
          :class="[active ? 'toggle-active' : '']"
        >
          <u-icon v-show="active" name="checkbox-mark" color="#fff"></u-icon>
        </view>
        <view class="tip-data">
          已阅读并同意以下协议:<text class="txt">《用户协议》</text>和<text
            class="txt"
            >《隐私协议》</text
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { request, requestData } from '../../utils/http.js'
export default {
  data() {
    return {
      active: true,
    }
  },
  methods: {
    //手机号
    onGetPhoneNumber(e) {
      if (!this.active) {
        uni.$u.toast('请先同意协议')
        return
      }
      const {
        detail: { encryptedData, iv, code },
      } = e
      if (e.detail.errMsg === 'getPhoneNumber:ok') {
        let open_id = uni.getStorageSync('open_id')
        let access_token = uni.getStorageSync('access_token')
        request('/wxaccess/mp/user/getPhoneNumber', {
          wxphone_code: code,
          open_id: open_id,
        })
          .then((res) => {
            uni.setStorageSync('open_id', res?.datas?.open_id || '')
            uni.setStorageSync('user_id', res?.datas?.user_id || '')
            uni.setStorageSync('access_token', res?.datas?.access_token || '')
            uni.setStorageSync('mobile', res?.datas.mobile || 0)
            uni.showToast({
              title: '绑定成功！',
              icon: 'success',
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 2000)
          })
          .catch((err) => {
            uni.showToast({
              title: err,
              duration: 2000,
              icon: 'none',
            })
          })
      } else {
        uni.showToast({
          title: '为了给您提供更好的服务，请同意获取手机号！',
          duration: 2000,
          icon: 'none',
        })
      }
    },

    handleToggle() {
      this.active = !this.active
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  background: #fff;
  font-size: 32rpx;
  display: flex;
  flex-flow: column;
  align-items: center;
}

.logo {
  width: 360rpx;
  height: 360rpx;
  margin-top: 20%;

  image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
}

.btn-wrap {
  padding: 80rpx;
  width: 80%;

  ::v-deep .u-button--primary {
    border: none !important;
    // background: linear-gradient(to right, #d5ad57, #cfb58a);
    background-color: $global-color-golden;
  }
}

.add-btn {
  border: none;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $global-color-golden;
  border-radius: 40rpx;
  color: #fff;
  font-size: 32rpx;
  font-weight: 400;
}

.tips {
  width: 90%;
  font-family: 28rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  .txt {
    color: $global-color-golden;
  }
}

.tip-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.toggle-check {
  width: 28rpx;
  height: 28rpx;
  border-radius: 50%;
  border: 1px solid #d6d6d6;
  margin-right: 10rpx;
  margin-top: 10rpx;
}

.toggle-active {
  background-color: $global-color-golden;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #fff;
  border: 1px solid $global-color-golden;
}

.tip-data {
  flex: 1;
}
</style>
